<template>
	<cl-dialog
		:title="title"
		width="620px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			closeOnClickModal: false
		}"
	>
		<el-form label-position="top">
			<div class="tips pa-2">
				<!-- <h2 class="mb-1">这么大的一个提示 ！！！</h2> -->
				<p>1.{{ subTitle }}</p>
				<p>2.上传报错时，按照错误提示自行排查</p>
			</div>
			<div class="pt-2">
				<el-row type="flex" justify="end">
					<!-- <el-button type="danger" plain @click="reviewExample = true"
						>查看示例</el-button
					> -->
					<el-button type="danger" v-if="downUrl" @click="goDownTemplate"
						>下载目标数据模板</el-button
					>
				</el-row>
			</div>
			<el-form-item class="pt-2">
				<el-upload
					drag
					multiple
					:headers="{ token }"
					:before-upload="beforeUpload"
					:file-list="fileList"
					:data="fileData"
					:on-error="uploadError"
					:on-success="uploadSuccess"
					:action="`${baseUrl}${apiUrl}`"
				>
					<i class="el-icon-upload" />
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import dayjs from "dayjs";
import { baseUrl } from "@/config/env";
export default {
	name: "upload-excel",
	props: {
		title: {
			type: String,
			default: "上传EXCEL"
		},
		subTitle: {
			type: String,
			default: "Excel中第一行数据不能修改 （可以在“表单”列数据后面添加自己的“列数据”）"
		},
		apiUrl: {
			type: String,
			default: ""
		},
		// 模板下载地址
		downUrl: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			baseUrl,
			visible: false,
			downTemplateUrl: "",
			reviewExample: false,
			// 上传数据
			fileData: {},
			files: "",
			fileList: []
		};
	},
	computed: {
		//事业部

		...mapGetters(["token"])
	},
	methods: {
		beforeClose(done) {
			done();
		},
		open() {
			this.visible = true;
		},
		close() {
			this.fileList = [];
			this.visible = false;
			this.$emit("close");
		},
		submit() {
			this.visible = false;
			this.$emit("confirm");
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "uploadFile/" + dayjs().format("YYYY-MM-DD");
		},
		// 上传成功
		uploadSuccess(res, file, fileList) {
			this.fileList = fileList;
			this.$message.success("上传成功");
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		},
		// 下载模板
		goDownTemplate() {
			if (!this.downUrl) {
				this.$message.error("暂无下载模板！");
				return false;
			}
			window.open(this.downUrl, "__blank");
		}
	}
};
</script>
<style lang="scss" scoped>
.tips {
	box-sizing: border-box;
	background: #fbe1e3;
	color: #d9001b;
	line-height: 1.8;
	font-size: 14px;
	h2 {
		font-size: 18px;
	}
}
::v-deep {
	.el-icon-upload {
		font-size: 60px;
	}
	.el-upload {
		width: 100%;
		&-dragger {
			width: 100%;
		}
	}
}
</style>
